.login {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	background: url("../../assets/images/login/background.jpg") no-repeat;

	&-wrapper{
		visibility: visible;
		display: flex;
		width: 50%;
		background: #fff;
		box-shadow: 0px 11px 14px -7px rgba(0,0,0,0.2), 0px 23px 36px 3px rgba(0,0,0,0.05600000000000001), 0px 9px 44px 8px rgba(0,0,0,0.048);
		animation: slide-top .8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		@media screen and (max-width: 768px) {
			width: 80%;
		}

		&-img{
			width: 50%;
			padding: 48px 32px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #f2f4f4;

			img{
				width: 100%;
			}
			@media screen and (max-width: 768px) {
				display: none;
			}
		}

		&-form{
			flex: 1;
			overflow: hidden;
			padding: 32px;

			&-title{
				font-size: 18px;
				margin-bottom: 16px;
				margin-top: 0;

				&-icon{
					font-size: 24px;
				}
			}

			&-description{
				margin-top: 0;
				margin-bottom: 16px;
				font-size: 14px;
			}
		}
	}
}

@keyframes slide-top {
	0% {
		opacity: 0;
		-webkit-transform: translateY(80px);
		transform: translateY(80px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}